<div class="bg-white d-flex search-header header-shadow">
  <div class="container d-flex flex-column justify-content-between">
    <div class="pt-4 px-3">
      <div class="input-group" id="workflow-search">
        <input type="text" class="form-control"
               [(ngModel)]="search"
               placeholder="Filter workflows by Name/State/Creation Time/ID"
               aria-describedby="workflow-search">
        <div class="input-group-append">
          <span class="input-group-text"><i class="fa fa-search"></i></span>
        </div>
      </div>
      <!--<p><strong>Showing {{executions.length}} Executions</strong></p>-->
    </div>

    <div class="row pb-1 m-0 text-muted">
      <div class="col-sm-1 col-3" (click)="changeSort('state')" [ngClass]="getSortClass('state')">State</div>
      <div class="col-sm-8 col-4" (click)="changeSort('name')" [ngClass]="getSortClass('name')">Workflow</div>
      <div class="col-sm-2 col-4" (click)="changeSort('created_at')" [ngClass]="getSortClass('created_at')">Created At</div>
      <div class="col-sm-1 col-1 text-right">
          <button class="btn btn-light btn-sm" title="Refresh" (click)="refresh()">
              <i class="fa fa-refresh" [class.fa-spin]="loading"></i>
          </button>
      </div>
    </div>

  </div>
</div>

<div class="container search-results">

  <div id="executions-list" #executionsList [ngClass]="{'d-flex align-items-center justify-content-center': !executions || executions.length === 0}">
    <ng-container *ngIf="executions && executions.length > 0; else noExecutions">
      <ng-container *ngFor="let execution of executions | search : search ; trackBy: execTrackBy">
        <div [routerLink]="[execution.id]" class="row py-3 execution-list-item pointer">
          <div class="col-sm-1 col-3">
            <span class="badge font-weight-normal" [ngClass]="execution.state">{{execution.state}}</span>
          </div>
          <div class="col-sm-8 col-4 word-break-all">{{execution.workflow_name}}</div>
          <div class="col-sm-3 col-5">{{execution.created_at}}</div>
        </div>
      </ng-container>
    </ng-container>

    <ng-template #noExecutions>
      <div *ngIf="!executions">
        <i class="fa fa-spin fa-refresh fa-3x"></i>
      </div>
      <div class="text-center" *ngIf="executions && executions.length === 0">
        <h2><em>No executions found on this Mistral server</em></h2>
        <h5>It's time to create one and explore its run with CloudFlow!</h5>
      </div>
    </ng-template>
  </div>
</div>

<div class="container text-center" *ngIf="nextMarker">
  <i class="fa" [ngClass]="{'fa-spin fa-refresh': loading, 'fa-angle-double-down': !loading && nextMarker}"></i>
</div>